<template>
    <div class="page-box">
        <el-row class="page-box-item">
            <el-col :span="4" style="padding-left: 5px; padding-right: 5px;">

                <el-card shadow="never">
                    <el-input placeholder="过滤" style="margin-bottom: 10px;" v-model="filterText"></el-input>
                    <el-tree :data="ItemTypeData" :props="defaultProps" @node-click="handleNodeClick" ref="tree"
                        :filter-node-method="filterNode"></el-tree>
                </el-card>
            </el-col>
            <el-col :span="20" style="padding-left: 5px; padding-right: 5px;">
                <div class="page-search">
                    <div>
                        <label>物料编码</label>
                        <el-input v-model="searchForm.ItemCode" style="width: 160px;" placeholder="请输入物料编码"></el-input>
                    </div>
                    <div>
                        <label>物料名称</label>
                        <el-input v-model="searchForm.ItemName" style="width: 160px;" placeholder="请输入物料名称"></el-input>
                    </div>
                    <div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>



                <div class="page-section">
                    <div class="page-tool">
                        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
                        <el-dropdown class="mg-l">
                            <el-button size="small" type="primary" plain>
                                <i class="el-icon-s-grid"></i> 
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </div>


                    <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column fixed prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Vendor" label="供应商" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="LineType" label="线别" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="有效日期" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{ scope.row.EffectiveDate | formatDateTime  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Kind" label="品类" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="PurchasePrice" label="采购价" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="SalePrice" label="销售价" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemTypeName" label="所属分类" :show-overflow-tooltip="true"></el-table-column>



                        <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.EnableFlag === 'Y'">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SafeStockFlag" label="安全库存" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.SafeStockFlag === 'Y'">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column label="操作" :show-overflow-tooltip="true" width="160">
                            <template slot-scope="scope">
                                <el-button type="text" @click="update(scope.row)">编辑</el-button>
                                <el-button type="text" @click="del(scope.row)">删除</el-button>
                                <el-button type="text" @click="details(scope.row)">明细</el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                    <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                        :TotalCount="pageDomain.TotalCount" />
                </div>
            </el-col>
        </el-row>


        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="60%" @close="closeDialog">
            <ItemInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==0" />
            <ItemDetails :model="model" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==1"/>
        </el-dialog>

    </div>
</template>
<script>


//es6 对象名
import ItemInput from './components/ItemInput.vue';
import Pagination from '@/components/Pagination.vue';
import ItemDetails from './components/ItemDetails.vue';
export default {
    components: {
        ItemInput,
        Pagination,
        ItemDetails
    },
    mounted() {
        this.dataBind();

        this.getItemType();
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {

            filterText: '',
            //搜索字段
            searchForm: {
                ItemCode: '',
                ItemName: '',
                ItemTypeId:-1
            },
            ItemTypeData: [],
            defaultProps: {
                children: 'Children',
                label: 'ItemTypeName'
            },


            //对话框对象
            dialogDomain: {
                title: '新增物料/产品',
                dialogVisible: false,
                dialogType:0
            },


            isUpdate: false,
            //数据模型
            model: {
                ItemCode: '',
                ItemName: '',
                Spec: '',
                Model: '',
                Vendor: '',
                LineType: '',
                EffectiveDate: '',
                Kind: '',
                PurchasePrice: '',
                UnitOfMeasure: '',
                SalePrice: '',
                Remark: '',
                ItemOrProduct: '',
                MinStock:0,
                MaxStock:0,

                EnableFlag: 'Y',
                SafeStockFlag: 'Y',
                CreateTime: '',

            },

            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false


        }
    },
    methods: {
        add() {
            this.dialogDomain.title = "新增物料产品";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType=0;
            this.isUpdate = false;
        },
        update(model) {
            this.dialogDomain.title = "编辑物料产品";
            this.dialogDomain.dialogVisible = true;
            this.isUpdate = true;
            this.dialogDomain.dialogType=0;

            console.log(model);
            this.model = model;
        },
        details(model){
            this.dialogDomain.title = "物料产品明细";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType=1;
            this.model = model;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.ItemTypeName.indexOf(value) !== -1;
        },

        //批量删除
        dels() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    //获取选中的表格数据 并筛选id
                    var ids = this.$refs.dataForm.selection.map(x => x.Id)

                    //拼接参数
                    let params = new URLSearchParams();
                    params.append('ids', ids.join(','))

                    this.$http.delete('/api/Item/DelAll', {
                        data: params,
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        },
                        loading: this.$loading()
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });

        },

        //删除单条
        del(model) {
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/api/Item', {
                        data: {
                            id: model.Id
                        },
                        headers: {
                            'content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        exports(){
            this.$confirm('即将导出报表，是否继续？', '系统提示', {
                confirmButtonText: '导出',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.request({
                    method: "GET",
                    loading:this.$loading(),
                    url: "/api/Item/Export",
                    responseType: 'blob'
                }).then((res)=>{
                    const blob = new Blob([res])
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '产品物料信息.xls'; //下载后文件名
                    downloadElement.click(); //点击下载
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
                

            }).catch((err)=>{
                console.log(err);
            })

        },



        //对话框关闭事件
        closeDialog() {
            this.model = {
                ItemCode: '',
                ItemName: '',
                Spec: '',
                Model: '',
                Vendor: '',
                LineType: '',
                EffectiveDate: '',
                Kind: '',
                PurchasePrice: '',
                UnitOfMeasure: '',
                SalePrice: '',
                Remark: '',
                ItemOrProduct: '',
                MinStock:0,
                MaxStock:0,

                EnableFlag: 'Y',
                SafeStockFlag: 'Y',
                CreateTime: '',
            }
        },


        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.ItemCode = '';
            this.searchForm.ItemName = '';
            this.searchForm.ItemTypeId=-1;
        },
        //新增或编辑页面回调
        callback() {
            let actionName = this.isUpdate ? '编辑' : '新增';
            this.showNotify(actionName + '物料产品成功', 'success');
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        },


        //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/Item',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        ItemCode: this.searchForm.ItemCode,
                        ItemName: this.searchForm.ItemName,
                        ItemTypeId:this.searchForm.ItemTypeId
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        getItemType() {
            this.$http.get('/api/ItemType')
                .then(res => {
                    this.ItemTypeData = res.Data;
                    this.ItemTypeData.unshift({ Id: -1, ItemTypeName: '全部' });
                })
        },
        
       
        handleNodeClick(data) {
            this.searchForm.ItemTypeId = data.Id;
            this.dataBind();
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },



    }
}
</script>
<style scoped></style>
